<html>
<head>
  <title><g:layoutTitle default="twitterClone"/></title>
  <link rel="stylesheet" href="${createLinkTo(dir: 'css', file: 'screen.css')}"/>
  <link rel="stylesheet" href="${createLinkTo(dir: 'css', file: 'main.css')}"/>
  <link rel="stylesheet" href="${createLinkTo(dir: 'css', file: 'ie.css')}"/>
  <link rel="shortcut icon" href="${createLinkTo(dir: 'images', file: 'favicon.ico')}" type="image/x-icon"/>
  <g:layoutHead/>
  <g:javascript library="prototype"/>
  <g:javascript library="scriptaculous"/>
  <g:javascript library="corners"/>
  <g:javascript library="application"/>
</head>
<body>
<div id="spinner" class="spinner" style="display:none;">
  <span style="">Now Loading...</span>
  <img src="${createLinkTo(dir: 'images', file: 'spinner.gif')}" alt="Spinner"/>
</div>
<div class="container">
  <div class="span-40">
    <div class="span-18">
      <!-- logo & home -->
      <a href="${createLinkTo(dir: '')}">
        <img src="${createLinkTo(dir: 'images', file: 'twitterClone_logo.png')}" alt="twitterClone"/>
      </a>
    </div>
    <div class="span-21">
      <!-- main menu -->
      <g:render template="/layouts/mainmenu"/>
    </div>
  </div>
  <div class="clear span-40 round_corner" id="contents">
    <!-- contents -->
    <g:layoutBody/>
  </div>
</div>
<g:javascript>
  $$(".round_corner").each(function(element) {
    new Effect.Corner(element, "10px")
  })
</g:javascript>
</body>
</html>
